<template>
  <el-container>
    <el-header>文本比对工具</el-header>
    <el-main>
      <el-row>
        <el-button type="primary" style="margin-bottom:10px" :loading="diffButtonLoading" @click="computedTest">开始比对</el-button>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="left_rowslength"
            placeholder="请输入内容"
            v-model="leftTextArea"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="right_rowslength"
            placeholder="请输入内容"
            v-model="rightTextArea"
          ></el-input>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <el-row>
        <el-col :span="12">左边结果</el-col>
        <el-col :span="12">右边结果</el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import {textDiff} from "../text_diff.js"

export default {
  data() {
    return {
      leftTextArea: "",
      rightTextArea: "",
      left_rowslength: 6,
      right_rowslength: 6,
      diffButtonLoading:false
    };
  },
  methods: {
    computedTest() {
      this.diffButtonLoading = true;
      if(this.leftTextArea && this.rightTextArea) {
        // console.log(this.leftTextArea + " " + this.rightTextArea)
        
      }
      textDiff(this.leftTextArea, this.rightTextArea);
      this.diffButtonLoading = false;
    }
  }
};
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
